<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/FoodSageTemplate.xhtml">


    <ui:define name="style">
        <style type="text/css">
            #_gdir{font-size:14px;}
            #_gdir > div{font-weight:bold;text-align:center;}
            #_gdir p._sum{text-align:center;font-weight:bold;color:#3a741f;}
            #_gdir ol{padding:10px 30px 10px 40px;}
            #_gdir ol li{border-bottom:1px solid #ccc;}
            #_gdir ol li div p.r{font-size:11px;color:#3a741f;text-align:right;}
            #_gdir div._copy{font-size:12px;font-weight:normal;}
        </style>
    </ui:define>

    <ui:define name="logout">
        <p:commandLink id="logoutLink" actionListener="#{touristLogoutManagedBean.doLogout}" value="#{bundle['login.logout.label']}" ajax="false" immediate="true" />
    </ui:define>

    <ui:define name="main_menu">
        <f:view beforePhase="#{ItineraryViewAvailableGoThereTransportManagedBean.initView}"/>
        <p:menubar model="#{ItineraryViewAvailableGoThereTransportManagedBean.touristMainMenuModel}"/>
    </ui:define>

    <ui:define name="nav_menu">
        <p:menu model="#{ItineraryViewAvailableGoThereTransportManagedBean.touristNavMenuModel}"/>
    </ui:define>

    <ui:define name="content">
        <p:panel id="GoThereAPI">
            <div id="map" style="width:600px;height:600px;margin-right:20px;float:left;"></div>
            <div id="detailBar" style="width:300px;float:left;">

                <h:panelGrid columns="2" cellpadding="5">
                    <h:outputLabel value="#{bundle['transportGoThere.from.label']}" style="font-weight: bold"/>
                    <h:outputLabel value="#{itineraryViewAvailableGoThereTransport.toLocation}" style="font-weight: bold"/>
                    <h:outputLabel value="#{bundle['transportGoThere.to.label']}" style="font-weight: bold"/>
                    <h:outputLabel value="#{itineraryViewAvailableGoThereTransport.fromLocation}" style="font-weight: bold"/>
                </h:panelGrid>
                    
                <h:panelGrid columns="3" cellpadding="5">
                    <h:outputLabel id="goThereTransportTypeLabel" value="#{bundle['transportGoThere.via.label']}" style="font-weight: bold"/>
                    <h:selectOneMenu id="mode" converter="time24HConverter" >
                        <f:selectItems value="#{enumTransportType.listItems}"/>
                    </h:selectOneMenu>
                    <p:message for="mode" />
                </h:panelGrid>
                    
                <h:commandButton id="goThereDirectionsButton" onclick="getDirections(this.from.value, this.to.value, this.mode.value);return false;" value="#{bundle['transportGoThere.getDirections.label']}" />

                <div id="panel"></div>
            </div>
            <script type="text/javascript" src="http://gothere.sg/jsapi?sensor=false"></script>
            <script type="text/javascript">
                gothere.load("maps");
                var directions;
                function initialize() {
                    if (GBrowserIsCompatible()) {
                        // Create the Gothere map object.
                        var map = new GMap2(document.getElementById("map"));
                        // Set the center of the map.
                        map.setCenter(new GLatLng(1.362083, 103.819836), 11);
                        // Add zoom controls on the top left of the map.
                        map.addControl(new GSmallMapControl());
                        // Add a scale bar at the bottom left of the map.
                        map.addControl(new GScaleControl());

                        directions = new GDirections(map, document.getElementById("panel"));
                        // directions.load("from: Changi Airport to: Orchard Road");
                      }
                }

                function getDirections(from, to, mode) {
                    var travelMode;
                    switch(mode) {
                        case "pt":
                            travelMode = G_TRAVEL_MODE_TRANSIT;
                            break;
                        case "t":
                            travelMode = G_TRAVEL_MODE_TAXI;
                            break;
                        case "d":
                        default:
                            travelMode = G_TRAVEL_MODE_DRIVING;
                            break;
                    }
                    directions.load("from: " + from + " to: " + to, {travelMode: travelMode});
                }

                gothere.setOnLoadCallback(initialize);
            </script>
        </p:panel>
        
    </ui:define>  

</ui:composition>

